<script setup>
const props = defineProps({
  currentLi: String
})
</script>

<template>
  <div class="total">
    <div class="sphere">
      <div class="sphere-bg"></div>
      <div class="sum">
        <span>总部云</span>
      </div>
      <div class="sum1">
        <span>省侧云</span>
      </div>
    </div>
    <div class="cicle3"></div>
    <div class="cicle4"></div>
    <div class="cicle5"></div>
    <div class="cicle6"></div>
    <div class="cicle7"></div>
    <div class="cicle8">
      <span>节点A</span>
      <p>场站边</p>
    </div>
    <div class="cicle10">
      <span>节点B</span>
      <p>场站边</p>
    </div>
    <!-- 添加连线 -->
    <div
      class="data-line line1"
      :class="props.currentLi === 'upload' || props.currentLi === 'evolution' ? 'line-height' : ''"
    ></div>
    <div
      class="data-line line2"
      :class="props.currentLi === 'evolution' ? 'line-height' : ''"
    ></div>
    <div
      class="data-line line3"
      :class="props.currentLi === 'upload' || props.currentLi === 'sample' ? 'line-height' : ''"
    ></div>
    <div
      class="data-line line4"
      :class="props.currentLi === 'issued' || props.currentLi === 'sample' ? 'line-height' : ''"
    ></div>
  </div>
</template>

<style lang="scss" scoped>
.total {
  width: 65%;
  height: 100%;
  float: left;
  position: relative;
  margin-top: -40px;

  .rain {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
  }

  .data1,
  .data2,
  .data3,
  .data4 {
    width: 8rem;
    height: 4rem;
    position: absolute;

    span {
      color: #0ac1c7;
      font-size: 0.8rem;
      font-family: '宋体';
    }

    p {
      font-size: 1.5rem;
      color: #f29701;
    }
  }

  .data1 {
    left: 10%;
    top: 12%;
  }

  .data2 {
    left: 42%;
    top: 3%;
  }

  .data3 {
    left: 62%;
    top: 5%;
  }

  .data4 {
    left: 73%;
    top: 28%;
  }

  .dashed {
    position: absolute;
    left: 0;
    top: 0;
  }

  .sphere {
    width: 20rem;
    height: 20rem;
    position: relative;
    margin: 1% auto 0;

    .sphere-bg {
      position: absolute;
      z-index: 100;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: url(../images/53earth.png) no-repeat center;
      background-size: contain;
    }

    .sum {
      position: absolute;
      z-index: 100;
      left: 15%;
      top: -5%;
      width: 70%;
      height: 70%;
      background: url(../images/53cloud.png) no-repeat center;
      background-size: 55%;

      span {
        display: block;
        margin-top: 45%;
        padding-left: 35%;
        color: #006d8f;
        font-size: 1.2rem;
        font-weight: bold;
        text-shadow: 0 0 10px rgba(0, 109, 143, 0.5);
        font-family: "Microsoft YaHei", sans-serif;
        letter-spacing: 2px;
      }

      p {
        margin-top: 2%;
        text-align: center;
        color: #003c63;
        font-size: 1rem;
      }
    }

    .sum1 {
      position: absolute;
      z-index: 100;
      left: 20%;
      top: 35%;
      width: 60%;
      height: 60%;
      background: url(../images/53cloud.png) no-repeat center;
      background-size: 55%;

      span {
        display: block;
        margin-top: 45%;
        padding-left: 35%;
        color: #006d8f;
        font-size: 1.2rem;
        font-weight: bold;
        text-shadow: 0 0 10px rgba(0, 109, 143, 0.5);
        font-family: "Microsoft YaHei", sans-serif;
        letter-spacing: 2px;
      }

      p {
        margin-top: 2%;
        text-align: center;
        color: #003c63;
        font-size: 1rem;
      }
    }
  }

  .cicle3 {
    width: 35rem;
    height: 35rem;
    background: url(../images/circle.png) no-repeat center;
    background-size: 100%;
    position: absolute;
    top: 20%;
    left: 50%;
    transform-style: preserve-3d;
    transform: translateX(-50%) rotateX(75deg);
    animation: rotate3 20s linear infinite;
  }

  .cicle4 {
    width: 15rem;
    height: 15rem;
    position: absolute;
    top: 60%;
    left: 50%;
    transform-style: preserve-3d;
    background: url(../images/53gqright.png) no-repeat center;
    background-size: 100%;
    transform: translateX(-50%) rotateX(75deg);
    animation: rotate3 2s linear infinite;
  }

  .cicle5 {
    width: 15rem;
    height: 15rem;
    position: absolute;
    top: 62%;
    left: 50%;
    transform-style: preserve-3d;
    background: url(../images/53gqleft.png) no-repeat center;
    background-size: 100%;
    transform: translateX(-50%) rotateX(75deg);
    animation: rotate4 2s linear infinite;
  }

  .cicle6 {
    width: 12rem;
    height: 12rem;
    position: absolute;
    top: 70%;
    left: 50%;
    transform-style: preserve-3d;
    background: url(../images/535gqbottomright.png) no-repeat center;
    background-size: 100%;
    transform: translateX(-50%) rotateX(75deg);
    animation: rotate3 2s linear infinite;
  }

  .cicle7 {
    width: 12rem;
    height: 12rem;
    position: absolute;
    top: 72%;
    left: 50%;
    transform-style: preserve-3d;
    background: url(../images/53gqbottomleft.png) no-repeat center;
    background-size: 100%;
    transform: translateX(-50%) rotateX(75deg);
    animation: rotate4 2s linear infinite;
  }

  .cicle8,
  .cicle10 {
    width: 5rem;
    height: 5rem;
    position: absolute;
    top: 40%;
    left: 50%;
    z-index: 100;
    margin-left: -2.5rem;
    border-radius: 50%;

    span {
      display: block;
      margin-left: 25%;
      font-size: 1.1rem;
      font-weight: 500;
      margin-top: 20%;
      letter-spacing: var(--letter-spacing-base);
    }

    p {
      text-align: center;
      font-size: 0.85rem;
      font-weight: 400;
      letter-spacing: var(--letter-spacing-base);
    }
  }

  .cicle8,
  .cicle10 {
    width: 5rem;
    height: 5rem;
    position: absolute;
    z-index: 100;
    border-radius: 50%;
    background: url(../images/circle1.png) no-repeat;
    background-size: 100%;
    color: #f29701;
  }

  .cicle8 {
    top: 60%; // 保持垂直位置不变
    left: 35%; // 从 30% 改为 35%，向中间靠拢
  }

  .cicle10 {
    top: 60%; // 保持垂直位置不变
    left: 65%; // 从 70% 改为 65%，向中间靠拢
  }

  // 修改连线基础样式
  .data-line {
    position: absolute;
    height: 8px;
    background: linear-gradient(90deg, #09c4ca, #3eacb4, #09c4ca);
    box-shadow:
      0 0 15px #09c4ca,
      0 0 25px #09c4ca,
      0 0 35px #09c4ca;
    opacity: 0.8;
    transition: background 0.3s ease, box-shadow 0.3s ease;

    &::after {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      border-style: solid;
    }
  }

  .line1 {
    height: 50px;
    width: 16px;
    top: 25%;
    left: 48%;
    transform: translateX(-50%);

    &::after {
      top: -12px;
      left: 50%;
      transform: translateX(-50%);
      border-width: 0 14px 16px 14px;
      border-color: transparent transparent #09c4ca transparent;
    }
  }

  .line2 {
    height: 50px;
    width: 16px;
    top: 25%;
    left: 52%;
    transform: translateX(-50%);

    &::after {
      bottom: -12px;
      left: 50%;
      transform: translateX(-50%);
      border-width: 16px 14px 0 14px;
      border-color: #09c4ca transparent transparent transparent;
    }
  }

  // 修改斜线样式（line3 和 line4）
  .line3 {
    height: 50px;
    width: 16px;
    top: 50%;
    left: 40%;
    transform: translateX(-50%);

    &::after {
      top: -12px;
      left: 50%;
      transform: translateX(-50%);
      border-width: 0 14px 16px 14px;
      border-color: transparent transparent #09c4ca transparent;
    }
  }

  .line4 {
    height: 50px;
    width: 16px;
    top: 50%;
    left: 60%;
    transform: translateX(-50%);

    &::after {
      bottom: -12px;
      left: 50%;
      transform: translateX(-50%);
      border-width: 16px 14px 0 14px;
      border-color: #09c4ca transparent transparent transparent;
    }
  }

  @keyframes dataFlow {
    0% {
      opacity: 0.4;
      transform: translateY(-5px);
    }
    50% {
      opacity: 0.8;
    }
    100% {
      opacity: 0.4;
      transform: translateY(5px);
    }
  }

  // 修改高亮状态
  .line-height {
    background: linear-gradient(90deg, #f29701, #e07b00, #f29701) !important;
    box-shadow:
      0 0 20px #f29701,
      0 0 30px #f29701 !important;
    animation: dataFlow 1.5s ease-in-out infinite, pulse 2s infinite;
    &::after {
      animation: dataFlow 1.5s ease-in-out infinite;
      transform: translateX(-50%) !important; // 保持箭头居中
    }
  }
  .line-height.line1::after,
  .line-height.line3::after {
    border-color: transparent transparent #e07b00 transparent !important;
  }

  .line-height.line2::after,
  .line-height.line4::after {
    border-color: #e07b00 transparent transparent transparent !important;
  }

  @keyframes pulse {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.3);
      opacity: 0.5;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
}

@keyframes rotate3 {
  0% {
    transform: translateX(-50%) rotateX(75deg) rotateZ(0);
  }
  100% {
    transform: translateX(-50%) rotateX(75deg) rotateZ(360deg);
  }
}
@keyframes rotate4 {
  0% {
    transform: translateX(-50%) rotateX(75deg) rotateZ(0);
  }
  100% {
    transform: translateX(-50%) rotateX(75deg) rotateZ(-360deg);
  }
}
</style>
